<template>
  <div class="head">
    <el-header class="flex justify-between items-center bg-white shadow-md">
      <span>企业员工管理系统</span>
      <el-icon  @click="isCollapse = !isCollapse" class=" cursor-pointer ml-1"><Expand /></el-icon>
    </el-header>
    <div class="avatar flex justify-between items-center">
      <div class="inline-block">
        <el-button type="primary" @click="goHome"> 退出登录</el-button>
      </div>
      <div class="pl-1">
        <el-avatar 
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" 
      />
      <div class="inline-block">
          <div>用户{{ user.userName }}</div>
          <span>欢迎登录</span>
        </div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="content-left">
      <el-menu
        default-active="2"
        class="bg-white text-gray-700 shadow-md min-h-screen  "
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item
          index="1"
          class="px-2 py-2 hover:bg-gray-100"
          @click="router.push({
            name: 'about',
          })"
        >
          <el-icon><icon-menu /></el-icon>
          <template #title>首页</template>
        </el-menu-item>

        <el-menu-item index="2" 
          class="px-2 py-2 hover:bg-gray-100"
        @click="router.push({name: 'department'})">
        <el-icon><Histogram /></el-icon>
          <template #title>部门管理</template>
        </el-menu-item>
        <el-menu-item index="3" 
          class="px-2 py-2 hover:bg-gray-100"
        @click="router.push({name: 'position'})">
        <el-icon><Connection /></el-icon>
          <template #title>岗位管理</template>
        </el-menu-item>
        <el-menu-item index="4" 
          class="px-2 py-2 hover:bg-gray-100"
        @click="router.push({name: 'employee'})">
        <el-icon><UserFilled /></el-icon>
          <template #title>员工管理</template>
        </el-menu-item>
        <el-menu-item index="5" 
          class="px-2 py-2 hover:bg-gray-100"
        @click="router.push({name: 'leave'})">
        <el-icon><Tickets /></el-icon>
          <template #title>请假审批</template>
        </el-menu-item>
        <el-menu-item index="6" 
          class="px-2 py-2 hover:bg-gray-100"
        @click="router.push({
          name: 'attendance',
        })">
          <el-icon>
            <setting />
          </el-icon>
          <template #title>出勤管理</template>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content-right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  More,
  Expand,
  Connection,
  Histogram,
  Tickets,
  UserFilled,
  Setting,
} from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
import { useUserStore } from '@/store/useUserStore';
const user = useUserStore()
const router = useRouter()
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const goHome = () => {
  user.layout();
  router.push({
    name: 'login',
  })
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.content{
  display: flex;
  transform: all 0.3s ease-out ;
  &-left{
    height: 100%;
  }
  &-right{
    flex: 1;
  }
  // &-left{
  //   width: 200px;
  // }
}
.head{
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  display: flex;
  // text-align: center;
  align-content: center;
  justify-content: space-between;
  &-left{
    align-content: center;
  }
  .avatar{
    margin-right: 30px;
    align-content: center;
  }
}
</style>